<script setup lang="ts">
  import { ref } from 'vue'
  import { useAdministorStore } from '@/store/administor';
  import { message } from 'ant-design-vue'
  import axios from 'axios'
  import { onMounted } from 'vue';
  import type { articlesData, tagData } from '@/modules/manage';
  import { useRouter } from 'vue-router';
  import { useArticleStore } from '@/store/articleDetail';

  const administorStore = useAdministorStore();
  const articleStore = useArticleStore();
  const router=useRouter();
  const searchData=ref({
    label:''
  })
  let tableData = ref<articlesData[]>([]);
  const columns = ref<any[]>([]);
  columns.value = [
    { title: '文章ID', dataIndex: 'id', key: 'id' ,width: '150px'},
    { title: '标题', dataIndex: 'title', key: 'title' ,width: '150px'},
    { title: '作者', dataIndex: 'authorName', key: 'authorName' ,width: '150px'},
    { 
        title: '标签', 
        key: 'tags',
        slots:{customRender: 'tags'},
        width: '300px'},
    { 
      title: '操作', 
      key: 'action',
      slots: { customRender: 'action' },
      width: '15%'
    }
  ];

  const getArticlesData = async () => {
      const response = await administorStore.getAllArticle();
      tableData.value = response;
  };

  onMounted(getArticlesData);

  const articleDelete = async(record: articlesData) => {
    await axios.delete(`http://192.168.1.8:8000/deleteArticle/${record.id}`);
    await getArticlesData();
  }

  const pushToDetail = (record: articlesData) => {
      articleStore.articleContent= record.content
      console.log(articleStore.articleContent);
      
      router.push(`/article/${record.id}`)
  }
</script>
<template>
  <div style="flex-direction: column; background-color: rgba(240, 242, 245, 100)">
    <div class="form-head-body">
      <div style="display: flex; align-items: center;">
        <div style="display: flex; align-items: center;justify-content: flex-end; margin-right: 45vw;">
              <p><span style="color: red;">*</span><span>标签名：</span></p>
              <a-input v-model:value="searchData.label" placeholder="" style="width: 18.5vw;"/>
        </div>
      </div>
      <div style="display: flex; align-items: center;">
        <a-button type="primary" style="margin-right: 16px;">搜索</a-button>
      </div>
    </div>
    <div class="form-head-body" style="height: 580px;">
      <a-table 
        :dataSource="tableData" 
        :columns="columns" 
        rowKey="id"
        :pagination="{ pageSize: 6 }"
        style="width: 100%;display: flex;justify-content: center;"
        @click="pushToDetail"
      >
        <template #tags="{ record }">
          <a-tag v-for="tag in record.tags" :key="tag.id" color="blue">{{ tag.name }}</a-tag>
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button @click="pushToDetail(record)" type="primary">详情</a-button>
            <a-button @click="articleDelete(record)" type="primary">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<style lang="scss">
  .form-head-body{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 16px;
  }
</style>